postcss-unique-selectors

What is postcss-unique-selectors?

The postcss-unique-selectors npm package is a PostCSS plugin that removes duplicate CSS selectors within a rule. This helps in optimizing the CSS by ensuring that each selector is unique, which can reduce the size of the CSS file and improve maintainability.

What are postcss-unique-selectors's main functionalities?

Remove duplicate selectors

This feature removes duplicate selectors within a CSS rule. In the provided code sample, the duplicate 'a' selector is removed, resulting in 'a, b { color: red; }'.

const postcss = require('postcss');
const uniqueSelectors = require('postcss-unique-selectors');

const css = 'a, a, b { color: red; }';

postcss([uniqueSelectors])
  .process(css)
  .then(result => {
    console.log(result.css); // Output: 'a, b { color: red; }'
  });

Other packages similar to postcss-unique-selectors

cssnano

cssnano is a modular minifier based on the PostCSS ecosystem. It includes a variety of optimizations, including the removal of duplicate selectors, making it a more comprehensive tool compared to postcss-unique-selectors.

postcss-discard-duplicates

postcss-discard-duplicates is another PostCSS plugin that removes duplicate rules and declarations. While it focuses on removing duplicate rules and declarations, it can be used in conjunction with postcss-unique-selectors for more thorough CSS optimization.

README

postcss-unique-selectors

Ensure CSS selectors are unique.

Install

With npm do:

npm install postcss-unique-selectors --save

Example

Selectors are sorted naturally, and deduplicated:

Input

h1,h3,h2,h1 {
    color: red
}

Output

h1,h2,h3 {
    color: red
}

Usage

See the PostCSS documentation for examples for your environment.

Contributing

Pull requests are welcome. If you add functionality, then please add unit tests to cover it.

License

MIT © Ben Briggs